<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monaco Editor 功能整合演示</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
    <script src="./app.js"></script>
</head>

<body>
<div id="header">
    <h1>Monaco Editor 功能整合演示</h1>
    <div class="controls">
        <label for="language-select">编程语言:</label>
        <select id="language-select" class="language-select">
            <option value="javascript" selected>JavaScript</option>
            <option value="java">Java</option>
            <option value="cpp">C++</option>
            <option value="python">Python</option>
            <option value="go">Go</option>
            <option value="rust">Rust</option>
            <option value="csharp">C#</option>
            <option value="typescript">TypeScript</option>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="sql">SQL</option>
            <option value="json">JSON</option>
            <option value="xml">XML</option>
            <option value="yaml">YAML</option>
            <option value="markdown">Markdown</option>
            <option value="shell">Shell</option>
            <option value="php">PHP</option>
            <option value="ruby">Ruby</option>
            <option value="swift">Swift</option>
            <option value="kotlin">Kotlin</option>
        </select>

        <label for="theme-select">主题:</label>
        <select id="theme-select" class="theme-select">
            <option value="vs">浅色主题 (VS)</option>
            <option value="vs-dark">深色主题 (VS Dark)</option>
            <option value="hc-black">高对比度黑色</option>
            <option value="hc-light">高对比度浅色</option>
        </select>

        <button id="get-content-btn" class="btn">获取代码内容</button>
        <button id="clear-content-btn" class="btn">清空内容</button>
        <!--            <button id="insert-sample-btn" class="btn">插入示例代码</button>-->

        <button id="load-example-btn" class="btn">📝 加载示例</button>
        <button id="run-code-btn" class="btn">▶️ 运行代码</button>
        <button id="clear-result-btn" class="btn">🗑️ 清空结果</button>

    </div>
</div>

<div class="main-content">
    <div class="sidebar-section">
        <div class="workspace-header">
            <div class="ws-title">工作空间</div>
            <div class="ws-path">
                <input id="workspace-userid" type="text" value="test-user" placeholder="用户ID，例如 user001" />
                <input id="workspace-root" type="text" value="/home/coder/project" placeholder="工作空间根路径" />
            </div>
            <div class="ws-actions">
                <button id="refresh-tree-btn" class="btn small">刷新</button>
                <button id="new-file-btn" class="btn small">新建文件</button>
                <button id="new-folder-btn" class="btn small">新建文件夹</button>
                <button id="delete-path-btn" class="btn small danger">删除</button>
                <button id="save-file-btn" class="btn small primary">保存文件</button>
            </div>
        </div>
        <div id="file-tree" class="file-tree"></div>
    </div>
    <div class="editor-section">
        <div id="editor-container"></div>
    </div>

    <div class="info-section">
        <div class="info-panel">
            <h3>光标位置信息</h3>
            <div id="cursor-info">
                <p>行号: <span id="line-number">1</span></p>
                <p>列号: <span id="column-number">1</span></p>
                <p>字符位置: <span id="char-position">0</span></p>
            </div>
        </div>

        <div class="info-panel">
            <h3>编辑器状态</h3>
            <div id="editor-status">
                <p>总行数: <span id="total-lines">1</span></p>
                <p>总字符数: <span id="total-chars">0</span></p>
                <p>是否修改: <span id="is-modified">否</span></p>
            </div>
        </div>


        <div class="info-panel">
            <h3>代码内容预览</h3>
            <div id="content-preview">
                <textarea id="content-display" readonly placeholder="代码内容将在这里显示..."></textarea>
            </div>
        </div>
    </div>

    <div class="info-panel-result">
        <h3>** 代码执行结果 **</h3>
        <div id="code-execution">
<!--            <div style="margin-bottom:10px;">-->
<!--                <label for="stdin-input" style="display:block;margin-bottom:6px;">标准输入 (stdin)：</label>-->
<!--                <textarea id="stdin-input" class="stdin-input" placeholder="在这里填写运行时输入，例如：\n10\n或多行输入...\n"></textarea>-->
<!--            </div>-->
            <div id="execution-status" class="execution-status" style="display: none;"></div>
            <div id="execution-result" class="execution-result"></div>
        </div>
    </div>
<!--    <div class="info-panel-log">-->
<!--        <h3>操作记录</h3>-->
<!--        <div id="user-action-log">-->
<!--        </div>-->
<!--    </div>-->
</div>

<div id="footer">
    <p>Monaco Editor 功能整合演示 - 支持语法高亮、内容获取、光标位置跟踪、代码执行等功能</p>
</div>
</body>

</html> 